﻿<!DOCTYPE html>
<html>
<head>
  <title>ol-ext: iframe map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="ol.control.cloud adds an animated clouds overlay on the map." />
  <meta name="keywords" content="ol3, control, canvas, animation, cloud, bird" />

  <link rel="stylesheet" href="../style.css" />

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <script type="text/javascript" src="../../dist/extra/IFrameAPI.js"></script>

  <style>
    #map {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width:100%;
    }
  </style>

</head>
<body >
  <!-- Map div -->
  <div id="map" ></div>
  <script type="text/javascript">

var osm = new ol.layer.Tile({
  title: 'OSM',
  source: new ol.source.OSM()
});
var vector = new ol.layer.Vector({
  name: 'Departements',
  source: new ol.source.Vector({
    url: '../data/departements.geojson',
    format: new ol.format.GeoJSON(),
    attributions: [ "&copy; <a href='https://www.insee.fr'>INSEE</a>", "&copy; <a href='https://www.data.gouv.fr/fr/datasets/geofla-r/'>IGN</a>" ],
  })
})
var layers = [ osm, vector ];

// The map
var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    zoom: 0,
    center: [0,0]
  }),
  layers: layers
});

// Selection
var select = new ol.interaction.Select();
map.addInteraction(select);

// DrawPolygon
var draw = new ol.interaction.Draw({
  type: 'Polygon'
});
draw.setActive(false);
map.addInteraction(draw);


// NEW API
var api = new ol.ext.IFrameAPI();

api.set({
  setCenter: function(data) {
    map.getView().setCenter(ol.proj.fromLonLat(data));
  },
  getCenter: function(data) {
    return ol.proj.toLonLat(map.getView().getCenter());
  },
  setZoom: function(data) {
    console.log(data)
    map.getView().setZoom(data);
  },
  getZoom: function(data) {
    return map.getView().getZoom()
  },
  selectById: function(id) {
    select.getFeatures().clear();
    var ext = ol.extent.createEmpty();
    vector.getSource().getFeatures().forEach(function(f) {
      if (f.get('id') == id) {
        select.getFeatures().push(f);
        ol.extent.extend(ext, f.getGeometry().getExtent());
      }
      if (select.getFeatures().getLength()) {
        map.getView().fit(ext);
      }
    })
  },
  drawPolygon: function() {
    draw.setActive(true);
    select.setActive(false);
  }
});

// Post message on moveend
map.on('moveend', function(e) {
  api.postMessage('move', { 
    center: ol.proj.toLonLat(map.getView().getCenter()),
    zoom: map.getView().getZoom()
  })
});

// Select an object > post as GeoJSON
var format = new ol.format.GeoJSON();
select.on('select', function(e) {
  var selected = [];
  var deselected = [];
  e.selected.forEach(function(f) {
    var p = format.writeFeatureObject(f, { featureProjection: map.getView().getProjection() });
    selected.push(p);
  })
  e.deselected.forEach(function(f) {
    deselected.push(f.get('id'));
  });
  api.postMessage('select', {
    selected: selected,
    deselected: deselected
  });
});

// Draw a polygon
draw.on('drawend', function (e) {
  var p = format.writeFeatureObject(e.feature, { featureProjection: map.getView().getProjection() });
  p.geometry.length = ol.sphere.getLength(e.feature.getGeometry())
  p.geometry.area = ol.sphere.getArea(e.feature.getGeometry())
  api.postMessage('drawPolygon', p.geometry);
  draw.setActive(false);
  select.setActive(true);
})


  </script>

</body>
</html>